<template>
  <div class="app-container">
    <el-card class="box-card">
      <!--<div slot="header" class="clearfix">-->
        <!--<span>校时</span>-->
      <!--</div>-->

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="设备时间">
          <el-input disabled v-model="timeFormat" placeholder=""></el-input>
        </el-form-item>
        <el-button type="primary" @click="timings">校时</el-button>
      </el-form>
      <!--<div v-for="o in 4" :key="o" class="text item">-->
        <!--{{'列表内容 ' + o }}-->
      <!--</div>-->
      <p class="timingsMsg">注意:时间更新为当前电脑的时间</p>
    </el-card>

  </div>
</template>

<script>
    export default {
        name: "timing",
      data(){
          return{
            time:'',
            timeFormat:'正在初始化...',
            timeInterval:''
          }
      },
      methods:{
        UnixToDate:function(date){
          var date = new Date(date * 1000), //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            Y = date.getFullYear() + '-',
            M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-',
            D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ',
            h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':',
            m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':',
            s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
          return Y + M + D + h + m + s;
        },
        getDevTime:function(){
          var _this=this
          _this.getAjax({
            params:{
              opt:'time-stamp'
            }
          }).then(function (res) {
            console.log(res);
            _this.time=(res.split("&")[0].split("=")[1])*1
            _this.timeInterval=setInterval(function () {
              _this.time+=1
              _this.timeFormat=_this.UnixToDate(_this.time)
              // console.log(_this.UnixToDate(_this.time));
            },1000)

          }).catch(function (err) {
            _this.tips(_this.BASE.networkErrorMsg,'error')
            console.log(err);
          }).finally(function (fn) {
            console.log(fn);
          })
        },
        timings:function () {
          var _this=this,
            localTime=Math.floor(new Date().getTime()/1000)
          _this.getAjax({
            params:{
              opt:'set-time',
              'unix-time':localTime,
              msec:200
            }
          }).then(function (res) {
            console.log(res);
            _this.time=localTime
            _this.tips('校时成功','success')
          }).catch(function (err) {
            _this.tips(_this.BASE.networkErrorMsg,'success')
            console.log(err);
          }).finally(function (fn) {
            console.log(fn);
          })
        }
      },mounted:function () {
        var _this=this
        this.getDevTime()
      },destroyed(){
          //离开页面时，清除定时器
          clearInterval(this.timeInterval)
      }
    }
</script>

<style scoped>
  .timingsMsg{
    color:red;
    font-size: 14px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

</style>
